<!-- 参数设置 -->
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { QueryInfo, SaveInfo } from '../../api/index'
import { InfoFilled } from '@element-plus/icons-vue'

import Login from '../Login/Index.vue'
import UpdatePassword from './UpdatePassword.vue'
import ResetPassword from './ResetPassword.vue'

const props = defineProps(['lineValue', 'systemData', 'mailData'])

const systemInfo = ref({})
watch(
  () => props.systemData,
  (newVal, oldVal) => {
    systemInfo.value = JSON.parse(JSON.stringify(newVal))
  }
)

const mailInfo = ref({})
watch(
  () => props.mailData,
  (newVal, oldVal) => {
    mailInfo.value = newVal
  }
)

const emit = defineEmits(['updateSystem'])
const deviceList = ref<any[]>([])
const isEdit = ref(false)
const loginRef = ref()

const onEdit = () => {
  //调出验证窗口
  loginRef.value.open('EditFeederInfo')
}
const onSave = () => {
  const post = {
    InputStr: 'OperType=SaveFeederInfo',
    JsonStr: deviceList.value
  }
  SaveInfo(post).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg)
      return
    }
    ElMessage.success(res.msg)
    isEdit.value = false
    getDeviceInfo()
  })
}

const getDeviceInfo = () => {
  //重新获取品牌下拉框
  getBrandList()
  QueryInfo({
    InputStr: 'OperType=GetFeederInfo',
    JsonStr: []
  }).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg)
      return
    }
    const temp = JSON.parse(JSON.stringify(res.data.FeederInfo))
    deviceList.value = temp.map((item: any) => {
      return {
        ...item,
        Activity: JSON.parse(item.Activity)
      }
    })
  })
}

//系统参数
const isEditSystem = ref(false)
const editSystem = () => {
  //调出验证窗口
  loginRef.value.open('EditSystemInfo')
}
let systemForm = ref(systemInfo)
const saveSystem = () => {
  SaveInfo({
    InputStr: 'OperType=SaveSystemInfo',
    JsonStr: [systemForm.value]
  }).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg)
      return
    }
    isEditSystem.value = false
    ElMessage.success(res.msg)
    querySystem()
  })
}
const querySystem = () => {
  QueryInfo({
    InputStr: 'OperType=GetSystemInfo',
    JsonStr: []
  }).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg)
      return
    }
    // ElMessage.success(res.msg)
    systemForm.value = JSON.parse(JSON.stringify(res.data.SystemInfo[0]))
    emit('updateSystem', systemForm.value)
  })
}

//邮件
const isEditEmail = ref(false)
const editEmail = () => {
  //调出验证窗口
  loginRef.value.open('EditMailInfo')
}
let emailForm = ref<any>(mailInfo)
const saveEmail = () => {
  //格式化日志目录
  const { FilePath } = emailForm.value
  //将路径中的:\替换为:/
  const newPath = FilePath.replace(/\\/g, '$')
  SaveInfo({
    InputStr: 'OperType=SaveMailInfo',
    JsonStr: [
      {
        ...emailForm.value,
        FilePath: newPath
      }
    ]
  }).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg)
      return
    }
    isEditEmail.value = false
    ElMessage.success(res.msg)
    queryEmail()
  })
}
const queryEmail = () => {
  QueryInfo({
    InputStr: 'OperType=GetMailInfo',
    JsonStr: []
  }).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg)
      return
    }
    // ElMessage.success(res.msg)
    emailForm.value = JSON.parse(JSON.stringify(res.data.MailInfo[0]))
    const { FilePath } = emailForm.value
    //将路径中的:\替换为:/
    const newPath = FilePath.replace(/\$/g, '\\')
    // console.log(`output->newPath`, newPath)
    emailForm.value.FilePath = newPath
  })
}

const brandList = ref([])
//品牌下拉框
const getBrandList = () => {
  QueryInfo({
    InputStr: 'OperType=GetFeederBrand',
    JsonStr: []
  }).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg)
      return
    }
    brandList.value = res.data
  })
}

onMounted(() => {
  getDeviceInfo()
})

const closeLogin = (type: string) => {
  if (type.includes('System')) {
    isEditSystem.value = true
  }
  if (type.includes('Mail')) {
    isEditEmail.value = true
  }
  if (type.includes('Feeder')) {
    isEdit.value = true
  }
}

//改密
const updateRef = ref()
const changePw = () => {
  updateRef.value.open()
}

//重置
const resetRef = ref()
const resetPw = () => {
  resetRef.value.open()
}
</script>

<template>
  <div class="flex search justify-between">
    <div class="row-item w-2/5">
      <!-- 系统名称 -->
      <div class="my-box system-box">
        <div class="flex items-center">
          <p class="my-box-title">系统参数</p>
          <div class="my-button-box">
            <button v-if="!isEditSystem" class="my-button button-edit" @click="editSystem">编辑</button>
            <button v-else class="my-button button-save" :disabled="!isEditSystem" @click="saveSystem">
              保存
            </button>
            <button class="my-button button-search ml-4" @click="querySystem">刷新</button>
          </div>
        </div>
        <!-- 系统参数 -->
        <el-form class="my-form email-form" :model="systemForm" label-width="175">
          <el-form-item label="系统名称">
            <el-input
              v-model="systemForm.SystemName"
              placeholder="请输入系统名称"
              :disabled="!isEditSystem"
            />
          </el-form-item>
          <el-form-item label="客户名称">
            <el-input
              v-model="systemForm.CustName"
              placeholder="请输入客户名称"
              :disabled="!isEditSystem"
            />
          </el-form-item>
          <el-form-item label="厂区">
            <div class="flex flex-box">
              <el-input
                v-model="systemForm.Factory"
                placeholder="请输入厂区"
                style="width: 150px"
                :disabled="!isEditSystem"
              />
              <span class="ml-5 mr-2">楼层</span>
              <el-input
                v-model="systemForm.Floor"
                placeholder="请输入"
                style="width: 100px"
                :disabled="!isEditSystem"
              />
              <span class="ml-6 mr-2">线别</span>
              <el-input
                v-model="systemForm.Line"
                placeholder="请输入"
                style="width: 100px"
                :disabled="!isEditSystem"
              />
            </div>
          </el-form-item>
        </el-form>
      </div>
      <!-- 邮件设置 -->
      <div class="my-box email-box mt-2">
        <div class="flex items-center">
          <p class="my-box-title">邮件参数</p>
          <div class="my-button-box">
            <button v-if="!isEditEmail" class="my-button button-edit" @click="editEmail">
              编辑
            </button>
            <button
              v-else
              class="my-button button-save"
              @click="saveEmail"
            >
              保存
            </button>
            <button class="my-button button-search" @click="queryEmail">刷新</button>
          </div>
        </div>
        <el-form class="my-form email-form" :model="emailForm" label-width="175">
          <el-form-item label="账号">
            <el-input v-model="emailForm.MailFrom" disabled />
          </el-form-item>
          <el-form-item label="发送服务器">
            <el-input v-model="emailForm.Host" disabled />
          </el-form-item>
          <el-form-item label="收件人">
            <el-input
              v-model="emailForm.MailTo"
              type="textarea"
              class="my-textarea"
              :rows="2"
              :disabled="!isEditEmail"
            />
          </el-form-item>
          <el-form-item label="抄送人">
            <el-input
              type="textarea"
              class="my-textarea"
              :rows="2"
              v-model="emailForm.CCTo"
              :disabled="!isEditEmail"
            />
          </el-form-item>
          <el-form-item label="邮件主题">
            <el-input v-model="emailForm.Subject" :disabled="!isEditEmail" />
          </el-form-item>
          <el-form-item label="日志目录">
            <div class="flex">
              <el-input
                v-model="emailForm.FilePath"
                placeholder="请选择日志目录"
                :disabled="!isEditEmail"
              />
            </div>
          </el-form-item>
        </el-form>
      </div>
      <!-- 改密&重置 -->
      <div class="my-box reset-box mt-2">
        <div class="flex items-center justify-between">
          <p class="my-box-title">密码修改</p>
          <div>
            <button class="my-button button-edit mr-2" @click="changePw">改密</button>
            <button class="my-button button-search" @click="resetPw">重置</button>
          </div>
        </div>
      </div>
    </div>
    <div class="my-box row-item w-3/5">
      <div class="flex items-center justify-between">
        <p class="my-box-title mr-3">供料器参数</p>
        <el-form :inline="true" class="my-form device-form mr-3" @submit.prevent>
          <button v-if="!isEdit" class="my-button button-edit mr-2" @click="onEdit">编辑</button>
          <button v-else class="my-button button-save mr-2" @click="onSave">
            保存
          </button>
          <button class="my-button button-search" @click="getDeviceInfo">刷新</button>
        </el-form>
      </div>
      <div class="feeder-box table-box mt-4">
        <el-table :data="deviceList" height="640">
          <el-table-column
            label="名称"
            prop="Name"
            align="center"
            width="80"
            show-overflow-tooltip
          />
          <el-table-column label="编码" prop="Number" align="center" show-overflow-tooltip />
          <el-table-column align="center" label="品牌" prop="Brand" width="150">
            <template #default="scope">
              <el-select v-model="scope.row.Brand" :disabled="!isEdit">
                <el-option
                  v-for="(item, index) in brandList"
                  :key="index"
                  :label="item.Label"
                  :value="item.Value"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="IP" width="200">
            <template #default="scope">
              <el-input v-model="scope.row.IP" :disabled="!isEdit" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="站别" prop="Station" show-overflow-tooltip />
          <el-table-column
            align="center"
            prop="OPID"
            label="员工工号"
            width="110"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="机种"
            prop="Model"
            width="130"
            show-overflow-tooltip
          />
          <el-table-column align="center" label="启用" width="80" show-overflow-tooltip>
            <template #default="scope">
              <el-switch
                v-model="scope.row.Activity"
                :disabled="!isEdit"
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <Login ref="loginRef" @success="closeLogin" />
    <UpdatePassword ref="updateRef" />
    <ResetPassword ref="resetRef" />
  </div>
</template>
<style lang="less" scoped>
.my-form .el-input {
  --el-input-width: 500px;
}

.my-form .el-form-item {
  margin-bottom: 0;
}

.email-form .el-form-item {
  margin-bottom: 10px;
}

:deep(.my-form .el-form-item__label) {
  font-size: inherit;
  color: inherit;
  margin-top: 4px;
  color: #799ac1;
}
.flex-box {
  span {
    font-size: 22px;
    margin-top: 4px;
    color: #799ac1;
  }
}

:deep(.table-box .el-input__inner) {
  text-align: center;
}
:deep(.my-textarea .el-textarea__inner) {
  width: 500px;
  background: #1c324f;
  box-shadow: none;
  color: #799ac1;
  font-size: 1.3rem;
}

.table-box {
  :deep(.el-table) {
    font-size: 1.3rem;
    background-color: #141c36;
  }

  :deep(.el-table__empty-block) {
    background-color: #141c36;
  }

  :deep(.el-table th.el-table__cell) {
    background-color: #143452;
    color: #79a0c9;
    font-weight: 600;
  }

  :deep(.el-table .el-table__cell) {
    background: #141c36;
    color: #799ac1;
    border-bottom: 0;
    padding: 0.5rem 0;
  }

  :deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
    background-color: #1f4465;
  }

  :deep(.el-input__wrapper) {
    background: #1c324f;
    box-shadow: none;
  }

  :deep(.el-input__inner) {
    height: 2.6rem;
    color: #799ac1;
    font-size: 1.3rem;
  }

  :deep(.el-table) {
    --el-table-bg-color: none;
  }

  :deep(.el-table tbody .el-table__cell) {
    height: 20px;
    padding: 5px 0;
  }
  :deep(.el-input.is-disabled .el-input__wrapper) {
    background: #1c324f;
    box-shadow: none;
  }

  :deep(.el-input.is-disabled .el-input__inner) {
    -webkit-text-fill-color: #799ac1;
  }
}

:deep(.my-form .el-input__wrapper) {
  background: #1c324f;
  box-shadow: none;
  height: 2.6rem;
}

:deep(.my-form .el-input__inner) {
  height: 2.6rem;
  color: #799ac1;
  font-size: 1.3rem;
}

.my-form {
  :deep(.el-date-editor .el-range-input) {
    font-size: 1.3rem;
  }
  :deep(.el-date-editor .el-range-separator) {
    color: inherit;
  }
  :deep(.el-date-editor .el-range__icon) {
    font-size: 20px;
  }
}
.line-form {
  :deep(.el-form-item) {
    margin-right: 0;
  }
  :deep(.button.my-save-btn) {
    margin-left: 24px;
  }
}
.device-form {
  :deep(.el-form-item) {
    margin-right: 18px;
  }
  :deep(.el-form-item:last-child) {
    margin-right: 0;
  }
}
.table-box {
  :deep(.button--danger.is-plain.is-disabled) {
    background-color: var(--el-color-danger);
    border-color: var(--el-color-danger);
    color: #fff;
  }
  :deep(.el-table__empty-text) {
    color: #79a0c9;
  }
  :deep(.el-table .cell) {
    line-height: 28px;
  }
  :deep(.el-table__inner-wrapper::before) {
    display: none;
  }
}
.email-box,
.system-box,
.reset-box {
  width: 98%;
  .my-button-box {
    margin-left: 140px;
  }
  :deep(.el-input.is-disabled .el-input__wrapper) {
    background: #1c324f;
    box-shadow: none;
  }
  :deep(.el-textarea.is-disabled .el-textarea__inner) {
    background: #1c324f;
    box-shadow: none;
  }
}
.reset-box {
  padding-bottom: 10px;
  .button-search{
    margin-right: 65px;
  }
}

.feeder-box {
  width: 98%;
  height: 650px;
  margin-right: auto;
  margin-left: auto;
}
</style>
